import React, { useEffect, useRef, useState, useMemo } from 'react';
import { Layout, Table, Pagination, Button, Row, Col } from 'antd'
import { useParams } from 'react-router';
import {
    getOrderList,
    getOrderCount,
    getResturantDetail,
    getUserInfo,
    getAddressById
} from 'src/api/getData'
import './index.less'
import { cloneDeep } from 'lodash-es';

const { Content } = Layout;

function FoodList() {


    // 餐厅id
    const { restaurant_id } = useParams()
    // 搜索条件
    const [gettingQuery, setgettingQuery] = useState({
        pageNumber: 1,
        pageSize: 10,
    })

    const [loading, setLoading] = useState(false);
    const [state, setState] = useState({});
    const tableRef = useRef(null);
    // 表格行
    const columns = useMemo(() => ([
        {
            title: '订单 ID',
            dataIndex: 'id'
        },
        {
            title: '总价格',
            dataIndex: 'total_amount',
        },
        {
            title: '订单状态',
            dataIndex: 'status',
            render(text, record, index) {
                return record.status_bar.title
            }
        }
    ]), []);

    // 初始化订单列表
    useEffect(() => {
        getOrderListAsync()
    }, [])

    // 获取订单列表
    async function getOrderListAsync(params = {}) {
        setLoading(true);
        const payload = {
            ...gettingQuery,
            ...params
        }
        setgettingQuery(payload)
        try {
            const res = await getOrderList({ ...payload, restaurant_id });
            setState(res.data)
        } catch (err) {
            console.log('获取数据失败', err);
        }
        setLoading(false)
    }

    // 翻页
    const handlePaginationChange = (page, pageSize) => {
        getOrderListAsync({
            pageNumber: pageSize !== gettingQuery.pageSize ? 1 : page,
            pageSize,
        })
    }

    const expandable = useMemo(() => {
        return {
            expandedRowRender(record) {
                return <Row gutter={[16, 24]}>
                    <Col className="gutter-row" span={12}>
                        <span>用户名：</span>
                        <span>{record.user_name}</span>
                    </Col>
                    <Col className="gutter-row" span={12}>
                        <span>店铺名称：</span>
                        <span>{record.restaurant_name}</span>
                    </Col>
                    <Col className="gutter-row" span={12}>
                        <span>收货地址：</span>
                        <span>{record.address}</span>
                    </Col>
                    <Col className="gutter-row" span={12}>
                        <span>店铺 ID：</span>
                        <span>{record.restaurant_id}</span>
                    </Col>
                    <Col className="gutter-row" span={12}>
                        <span>店铺地址：</span>
                        <span>{record.restaurant_address}</span>
                    </Col>
                </Row>
            },
            onExpand(expanded, record) {
                if (expanded) {
                    // 获取信息
                    getExpandableInfoAsync(record)
                }
                console.log(expanded, record, 'expandedRows')
            }
        }
    }, [state.list])

    async function getExpandableInfoAsync(record) {
        try {
            const res0 = await getResturantDetail(record.restaurant_id)
            const {
                name: restaurant_name,
                address: restaurant_address,
            } = res0.data;
            const res1 = await getAddressById(record.address_id)
            const { address } = res1.data;
            const res2 = await getUserInfo(record.user_id)
            const { username: user_name } = res2.data;
            const listNew = cloneDeep(state.list)
            const index = listNew.findIndex(item => item.id === record.id);
            listNew[index] = {
                ...listNew[index],
                restaurant_name,
                restaurant_address,
                address,
                user_name
            }
            setState({
                ...state,
                list: listNew
            })
        } catch (error) {

        }
    }


    return <Layout className="shop-list-container">

        <Content>
            <div ref={tableRef} >
                <Table
                    rowKey="id"
                    columns={columns}
                    expandable={expandable}
                    dataSource={state.list || []}
                    bordered={true}
                    loading={loading}
                    pagination={false}
                    scroll={{
                        x: '100%',
                        y: 300
                    }}
                />
            </div>
            <Pagination
                pageSizeOptions={[10, 20, 30, 50]}
                showSizeChanger={true}
                onShowSizeChange={handlePaginationChange}
                onChange={handlePaginationChange}
                showTotal={total => `共${total}条`}
                className="ant-table-pagination ant-table-pagination-right"
                showQuickJumper={{
                    goButton: <Button
                        style={{ marginLeft: 8 }}
                    >跳转</Button>
                }}
                current={gettingQuery.pageNumber}
                pageSize={gettingQuery.pageSize}
                total={state.total}
            />
        </Content>

    </Layout>
}

export default FoodList